<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="gv-sub-content">
  <form name="$ctrl.formSettings" class="gv-forms" layout="column" ng-submit="$ctrl.save()">
    <h1>Settings</h1>
    <blockquote>
      <p style="font-size: 12px">
        <ng-md-icon icon="info" style="fill: grey"></ng-md-icon>
        Depending on your architecture, this configuration may be overridden by a local configuration file. See documentation for more
        information.
      </p>
    </blockquote>

    <div class="gv-form">
      <h2>Management</h2>
      <div class="gv-form-content" layout="column">
        <md-input-container class="md-block" flex>
          <label>Title</label>
          <input ng-model="$ctrl.settings.management.title" ng-disabled="$ctrl.isReadonlySetting('management.title')" />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('management.title')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-xs>
          <label>Management URL</label>
          <input type="text" ng-model="$ctrl.settings.management.url" ng-disabled="$ctrl.isReadonlySetting('management.url')" />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('management.url')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>
        <md-input-container class="gv-input-container-dense">
          <md-checkbox
            ng-model="$ctrl.settings.management.support.enabled"
            aria-label="Support"
            ng-disabled="$ctrl.isReadonlySetting('console.support.enabled')"
          >
            Activate Support
            <md-tooltip ng-if="$ctrl.isReadonlySetting('console.support.enabled')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
          </md-checkbox>
        </md-input-container>
        <md-input-container class="gv-input-container-dense">
          <md-checkbox
            ng-model="$ctrl.settings.management.userCreation.enabled"
            aria-label="Allow user creation"
            ng-disabled="$ctrl.isReadonlySetting('console.userCreation.enabled')"
          >
            Allow User Registration
            <md-tooltip ng-if="$ctrl.isReadonlySetting('console.userCreation.enabled')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
          </md-checkbox>
        </md-input-container>
        <md-input-container class="gv-input-container-dense portal-component__sub-input">
          <md-checkbox
            ng-model="$ctrl.settings.management.automaticValidation.enabled"
            ng-disabled="!$ctrl.settings.management.userCreation.enabled || $ctrl.isReadonlySetting('console.userCreation.automaticValidation.enabled')"
            aria-label="Enable auto validation of creation"
          >
            Enable automatic validation of registration requests.
            <md-tooltip ng-if="$ctrl.isReadonlySetting('console.userCreation.automaticValidation.enabled')"
              >{{$ctrl.providedConfigurationMessage}}</md-tooltip
            >
          </md-checkbox>
        </md-input-container>

        <h3>Theme</h3>
        <md-input-container class="md-block" flex-gt-xs>
          <label>Name</label>
          <input ng-model="$ctrl.settings.theme.name" ng-disabled="$ctrl.isReadonlySetting('theme.name')" />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('theme.name')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-xs>
          <label>Logo</label>
          <input ng-model="$ctrl.settings.theme.logo" ng-disabled="$ctrl.isReadonlySetting('theme.logo')" />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('theme.logo')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-xs>
          <label>Loader</label>
          <input ng-model="$ctrl.settings.theme.loader" ng-disabled="$ctrl.isReadonlySetting('theme.loader')" />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('theme.loader')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>
      </div>

      <div class="gv-form">
        <h2>Schedulers</h2>
        <div class="gv-form-content" layout="column">
          <md-input-container class="md-block" flex-gt-xs>
            <label>Tasks (in seconds)</label>
            <input
              type="number"
              min="0"
              ng-model="$ctrl.settings.scheduler.tasks"
              ng-disabled="$ctrl.isReadonlySetting('scheduler.tasks')"
            />
            <md-tooltip ng-if="$ctrl.isReadonlySetting('scheduler.tasks')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
          </md-input-container>
          <md-input-container class="md-block" flex-gt-xs>
            <label>Notifications (in seconds)</label>
            <input
              type="number"
              min="0"
              ng-model="$ctrl.settings.scheduler.notifications"
              ng-disabled="$ctrl.isReadonlySetting('scheduler.notifications')"
            />
            <md-tooltip ng-if="$ctrl.isReadonlySetting('scheduler.notifications')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
          </md-input-container>
        </div>
      </div>
    </div>

    <div class="gv-form">
      <h2>Alerting</h2>
      <div class="gv-form-content" layout="column">
        <md-input-container class="md-block" flex-gt-xs>
          <md-checkbox
            ng-model="$ctrl.settings.alert.enabled"
            aria-label="Alerting enabled"
            ng-disabled="$ctrl.isReadonlySetting('alert.enabled')"
          >
            Enable Alerting
            <md-tooltip ng-if="$ctrl.isReadonlySetting('alert.enabled')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
          </md-checkbox>
        </md-input-container>
      </div>
    </div>

    <div class="gv-form">
      <h2>CORS</h2>
      <div class="gv-form-content" layout="column">
        <md-input-container class="md-block">
          <label>Allow-Origin</label>
          <md-chips
            ng-model="$ctrl.settings.cors.allowOrigin"
            placeholder="*, https://mydomain.com, (http|https).*.mydomain.com, ..."
            md-on-add="$ctrl.controlAllowOrigin($chip, $index)"
            md-add-on-blur="true"
            readonly="$ctrl.isReadonlySetting('http.api.management.cors.allow-origin')"
          >
            <md-chip-template>
              <strong>{{$chip}}</strong>
            </md-chip-template>
          </md-chips>
          <div class="hint">
            The origin parameter specifies a URI that may access the resource. Scheme, domain and port are part of the
            <i>same-origin</i> definition.<br />
            If you choose to enable '*' it means that is allows all requests, regardless of origin. Regular Expressions are also supported.
          </div>
          <div ng-if="!$ctrl.isRegexValid()" style="color: red">Regex is invalid</div>
          <md-tooltip ng-if="$ctrl.isReadonlySetting('http.api.management.cors.allow-origin')"
            >{{$ctrl.providedConfigurationMessage}}</md-tooltip
          >
        </md-input-container>
        <md-input-container class="md-block" flex-gt-sm>
          <label>Access-Control-Allow-Methods</label>
          <md-select
            ng-model="$ctrl.settings.cors.allowMethods"
            md-on-close="clearSearchTerm()"
            data-md-container-class="selectdemoSelectHeader"
            multiple
            ng-disabled="$ctrl.isReadonlySetting('http.api.management.cors.allow-methods')"
          >
            <md-select-header class="demo-select-header">
              <input
                ng-model="searchTerm"
                type="search"
                placeholder="Search for allowed HTTP method."
                class="demo-header-searchbox md-text"
              />
            </md-select-header>
            <md-optgroup label="HTTPMethods">
              <md-option
                ng-value="method"
                ng-repeat="method in $ctrl.methods |
              filter:searchTerm"
                >{{method}}
              </md-option>
            </md-optgroup>
          </md-select>
          <div class="hint">
            Specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request.
          </div>
          <md-tooltip ng-if="$ctrl.isReadonlySetting('http.api.management.cors.allow-methods')"
            >{{$ctrl.providedConfigurationMessage}}</md-tooltip
          >
        </md-input-container>
        <md-input-container class="md-block">
          <label>Allow-Headers</label>
          <md-chips
            ng-model="$ctrl.settings.cors.allowHeaders"
            md-autocomplete-snap
            md-add-on-blur="true"
            md-require-match="false"
            readonly="$ctrl.isReadonlySetting('http.api.management.cors.allow-headers')"
          >
            <md-autocomplete
              md-search-text="searchHeaders"
              md-items="item in $ctrl.querySearchHeaders(searchHeaders)"
              md-item-text="item"
              placeholder="Content-Type, ..."
            >
              <span md-highlight-text="searchHeaders">{{item}}</span>
            </md-autocomplete>
            <md-chip-template>
              <span>
                <strong>{{$chip}}</strong>
              </span>
            </md-chip-template>
            <span class="ipsum">
              Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.
            </span>
          </md-chips>
          <md-tooltip ng-if="$ctrl.isReadonlySetting('http.api.management.cors.allow-headers')"
            >{{$ctrl.providedConfigurationMessage}}</md-tooltip
          >
        </md-input-container>
        <md-input-container class="md-block">
          <label>Exposed-Headers</label>
          <md-chips
            ng-model="$ctrl.settings.cors.exposedHeaders"
            md-autocomplete-snap
            md-add-on-blur="true"
            md-require-match="false"
            readonly="$ctrl.isReadonlySetting('http.api.management.cors.exposed-headers')"
          >
            <md-autocomplete
              md-search-text="searchHeaders"
              md-items="item in $ctrl.querySearchHeaders(searchHeaders)"
              md-item-text="item"
              placeholder="Content-Type, ..."
            >
              <span md-highlight-text="searchHeaders">{{item}}</span>
            </md-autocomplete>
            <md-chip-template>
              <span>
                <strong>{{$chip}}</strong>
              </span>
            </md-chip-template>
            <span class="ipsum">
              Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.
            </span>
          </md-chips>
          <md-tooltip ng-if="$ctrl.isReadonlySetting('http.api.management.cors.exposed-headers')"
            >{{$ctrl.providedConfigurationMessage}}</md-tooltip
          >
        </md-input-container>
        <md-input-container class="md-block" flex-gt-xs>
          <label>Max age (seconds) <small>How long the response from a pre-flight request can be cached by clients</small></label>
          <input
            type="number"
            min="0"
            ng-model="$ctrl.settings.cors.maxAge"
            ng-disabled="$ctrl.isReadonlySetting('http.api.management.cors.max-age')"
          />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('http.api.management.cors.max-age')"
            >{{$ctrl.providedConfigurationMessage}}</md-tooltip
          >
        </md-input-container>
      </div>
    </div>

    <div class="gv-form">
      <h2>SMTP</h2>
      <div class="gv-form-content" layout="column">
        <md-input-container class="gv-input-container-dense">
          <md-checkbox
            ng-model="$ctrl.settings.email.enabled"
            aria-label="Email enabled"
            ng-disabled="$ctrl.isReadonlySetting('email.enabled')"
          >
            Enable Emailing
            <md-tooltip ng-if="$ctrl.isReadonlySetting('email.enabled')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
          </md-checkbox>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-xs>
          <label>Host</label>
          <input
            type="text"
            ng-model="$ctrl.settings.email.host"
            ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.host')"
          />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('email.host')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-xs>
          <label>Port</label>
          <input
            type="number"
            min="0"
            ng-model="$ctrl.settings.email.port"
            ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.port')"
          />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('email.port')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-xs>
          <label>Username</label>
          <input
            type="text"
            ng-model="$ctrl.settings.email.username"
            ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.username')"
          />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('email.username')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-xs>
          <label>Password</label>
          <input
            type="password"
            ng-model="$ctrl.settings.email.password"
            ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.password')"
          />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('email.password')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-xs>
          <label>Protocol</label>
          <input
            type="text"
            ng-model="$ctrl.settings.email.protocol"
            ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.protocol')"
          />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('email.protocol')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-xs>
          <label>Subject</label>
          <input
            type="text"
            ng-model="$ctrl.settings.email.subject"
            ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.subject')"
          />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('email.subject')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>
        <md-input-container class="md-block" flex-gt-xs>
          <label>From</label>
          <input
            type="email"
            ng-model="$ctrl.settings.email.from"
            ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.from')"
          />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('email.from')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>

        <h3>Mail properties</h3>
        <md-input-container class="gv-input-container-dense">
          <md-checkbox
            ng-model="$ctrl.settings.email.properties.auth"
            aria-label="Alerting enabled"
            ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.properties.auth')"
          >
            Enable Auth
            <md-tooltip ng-if="$ctrl.isReadonlySetting('email.properties.auth')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
          </md-checkbox>
        </md-input-container>
        <md-input-container class="gv-input-container-dense">
          <md-checkbox
            ng-model="$ctrl.settings.email.properties.startTlsEnable"
            aria-label="Alerting enabled"
            ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.properties.starttls.enable')"
          >
            Enable Start TLS
            <md-tooltip ng-if="$ctrl.isReadonlySetting('email.properties.starttls.enable')"
              >{{$ctrl.providedConfigurationMessage}}</md-tooltip
            >
          </md-checkbox>
        </md-input-container>
        <md-input-container class="gv-input-container-dense">
          <label>SSL Trust</label>
          <input
            type="text"
            ng-model="$ctrl.settings.email.properties.sslTrust"
            ng-disabled="!$ctrl.settings.email.enabled || $ctrl.isReadonlySetting('email.properties.ssl.trust')"
          />
          <md-tooltip ng-if="$ctrl.isReadonlySetting('email.properties.ssl.trust')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
        </md-input-container>
      </div>
    </div>

    <md-card-actions>
      <md-button
        type="submit"
        class="md-raised md-primary"
        ng-disabled="$ctrl.formSettings.$invalid || $ctrl.formSettings.$pristine"
        permission
        permission-only="['organization-settings-c', 'organization-settings-u', 'organization-settings-d']"
        >Save
      </md-button>
      <md-button
        type="button"
        class="md-raised"
        ng-click="$ctrl.reset()"
        ng-disabled="$ctrl.formSettings.$invalid || $ctrl.formSettings.$pristine"
        permission
        permission-only="['organization-settings-c', 'organization-settings-u', 'organization-settings-d']"
        >Reset
      </md-button>
    </md-card-actions>
  </form>
</div>
